<script setup lang="ts">
import { Edit,Setting } from '@element-plus/icons-vue'
import { deepClone } from '@/utils/util'
import addMenu from '@/components/IconBox/index'
import { MeunItem } from '../interfaceType'
import { pageStore } from '@/store/modules/pageConfig'
import contextMenu from '@/components/RightMenu/index'
import { RightMenuItem, ContextMenuOptions } from '@/components/RightMenu/interfaceType'

let props = defineProps({
  config: { type: Object as () => MeunItem, required: true },
  keys: { type: String, default: '' },
  path: { type: String, default: '' },
})

function openUrl(){
  window.open(props.config.url)
}

const items: RightMenuItem[] = [
  {
    label: `编辑`,
    svg: Setting,
    onClick: () => {
      let menu = deepClone(props.config)
        addMenu(menu).then(res => {
          pageStore().updateHomeListByPath(props.path,deepClone(res))
        })
    }
  },
  {
    label: `删除`,
    svg: Setting,
    onClick: () => {
      pageStore().updateHomeListByPath(props.path,'delete')
    }
  }
]
const options: ContextMenuOptions = {
  items
}

function openMenu(e:MouseEvent){
  contextMenu(e,options)
}

</script>

<template>
  <div class="icon-box" style="height: 100%;" @click.stop="openUrl" @contextmenu.stop.prevent="openMenu">
    <div class="image">
      <el-image class="icon-img" :src="props.config?.iconUrl" fit="cover" />
    </div>
    <div class="title">{{ props.config?.title }}</div>
  </div>
</template>

<style scoped lang="scss">
.icon-box {
  &:after {
    content: '';
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    /* 蒙版颜色和透明度 */
  }

  transition: transform 0.3s;

  &:hover {
    cursor: pointer;
    transform: scale(1.05);
  }

  /* pointer-events: none; */
  .image {
    width: 100%;
    height: 60px;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    justify-content: center;

    .icon-img {
      border-radius: 10px;

    }
  }

  .title {
    font-size: 13px;
  }

  .content {
    position: relative;
    /* 确保内容在蒙版之上 */
    z-index: 1;
    color: white;
    /* 蒙版上的文字颜色 */
    height: 100%;
    width: 100%;
    position: sticky;
    bottom: 0;
  }
}
</style>